<template>
<div>
  <div class="Fg-table-container" :style="newStyle">
    <table
      :id="id"
      :border="$attrs.borderWidth"
      :cellpadding="0"
      :cellspacing="0"
      :align="$attrs.tableAlign"
      :style="{borderColor:$attrs.borderColor}"
    >
      <tr v-for="(tr,rIndex) in list" :key="rIndex">
        <template v-for="(td,dIndex) in tr.children">
          <!-- <td
            class="Fg-tips"
            v-if="td && td.colspan && td.rowspan"
            :key="dIndex"
            :colspan="td.colspan"
            :rowspan="td.rowspan"
            :id="td.id"
            :style="{ width: td.width  + '%',...td.style ,borderWidth:$attrs.borderWidth+'px',borderColor:$attrs.borderColor}"
            @click.stop="handleClick(td.id)"
          >-->
          <td
            class="Fg-tips"
            v-if="td && td.colspan && td.rowspan"
            :key="dIndex"
            :colspan="td.colspan"
            :rowspan="td.rowspan"
            :id="td.id"
            :style="{ width:100/tr.children.length+'%',...td.style ,borderWidth:$attrs.borderWidth+'px',borderColor:$attrs.borderColor}"
            @click.stop="handleClick(td.id)"
          >
            <div
              :class="activeId==td.id && $attrs.isEdit?'Fg-active Fg-td-active':''"
              :style="{'--cellpadding':$attrs.cellpadding * 2+'px',padding:$attrs.cellpadding+'px'}"
            >
              <!-- {{td.width}} -->
              <form-row-container
                height="100%"
                :list.sync="td.children"
                v-bind="$attrs"
                :border="false"
                :font="newStyle.font"
                 @validate="(item) => $emit('validate',item)"
              />
            </div>
            <template v-if="$attrs.isEdit && activeId==td.id">
              <!-- <MenuButton
                v-if="dIndex+td.colspan!==tr.children.length"
                icon="el-icon-rank"
                class="Fg-table-move"
                @click="dragStart($event, dIndex,rIndex)"
              />-->

              <div class="Fg-table-options">
                <!-- <TableStyle v-model="td.style" /> -->
                <TableOptions
                  :list="list"
                  :rIndex="rIndex"
                  :dIndex="dIndex"
                  @command="handleSelect($event,list,rIndex,dIndex)"
                />
              </div>
            </template>
          </td>
        </template>
      </tr>
    </table>
    <div v-if="dragging" class="Fg-resize-guide" :style="{ left: guideLeft + 'px' }"></div>
  </div>
</div>
</template>
 
<script>
import { deepClone, toCamelCase } from "../../../utils/index";
import * as table from "../../../utils/table";
import { getLeftTd, getRightTd } from "../../../utils/table";
import store from "@/store";
import { comMixin } from "../../../utils/comMixins";
export default {
  mixins: [comMixin],
  name: "form-table-container",
  props: {
    list: {
      type: Array,
      default: () => [],
    },
    scale: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      deepClone,
      toCamelCase,
      id: this.$attrs.__config__.formId,
      dragging: null,
      guideLeft: 0, // 引导线距离左侧窗口的距离
    };
  },
  computed: {
    activeId() {
      return store.state.app.activeId;
    },
  },
  methods: {
    handleSelect(value, list, rIndex, dIndex) {
      table[value](list, rIndex, dIndex);
      this.isInput = true;
    },
    handleClick(key) {
      // 只有在表单编辑器模式下才执行后续逻辑
      if (!this.$attrs.isEdit) return;
      store.commit("SET_ACTIVEID", key);
    },

    // 开始移动
    dragStart(event, dIndex, rIndex) {
      if (this.dragging) return (this.dragging = null);
      this.setWidth();
      const { td } = getLeftTd(this.list, rIndex, dIndex);
      // const tdEl = document.getElementById(td.id);
      // // 只有在边界时允许移动
      // if (tdEl.getBoundingClientRect().right - event.clientX > 6) return;
      this.dragging = {
        column: dIndex - 1 + td.colspan,
        startX: event.clientX, // 点击处距离左侧窗口距离
        moveWidth: 0, // 移动的距离
      };
      this.guideLeft = event.clientX; // 引导线的位置
      document.addEventListener("mousemove", this.drag);
      document.addEventListener("mouseup", this.dragEnd);
    },
    // 正在移动
    drag(event) {
      if (!this.dragging) return;
      this.guideLeft = event.clientX;
      // 移动的距离
      this.dragging.moveWidth = this.guideLeft - this.dragging.startX;
    },
    // 移动结束
    dragEnd() {
      const table = document.getElementById(this.id);
      // 整个表格的宽度
      const tableWidth = table.getBoundingClientRect().width;
      // 移动的宽度 / 表格宽度 = 移动的百分比
      const percent = (this.dragging.moveWidth / tableWidth) * 100;
      this.list.forEach((tr, rIndex) => {
        const { td, index } = getLeftTd(
          this.list,
          rIndex,
          this.dragging.column
        );
        const { td: td2 } = getRightTd(
          this.list,
          rIndex,
          this.dragging.column + 1
        );
        if (td && td2 && index - 1 + td.colspan == this.dragging.column) {
          // 相邻两个表格的整体宽度
          td.width += percent;
          td2.width -= percent;
          // const width = td.width + percent;
          // const width2 = td2.width - percent;
          // const minWidth = (200 / tableWidth) * 100;
          // if (width > minWidth && width2 > minWidth) {
          //   td.width = width;
          //   td2.width = width2;
          // }
        }
      });
      // 移动结束
      this.dragging = null;
      document.removeEventListener("mousemove", this.drag);
      document.removeEventListener("mouseup", this.dragEnd);
    },
    // 获取正式单元格列宽比例
    setWidth() {
      const table = document.getElementById(this.id);
      // 整个表格的宽度
      const tableWidth = table.getBoundingClientRect().width;
      this.list.forEach((tr) => {
        tr.children.forEach((td) => {
          if (td) {
            const tdEl = document.getElementById(td.id);
            const tdWidth = tdEl.getBoundingClientRect().width;
            td.width = (tdWidth / tableWidth) * 100;
          }
        });
      });
    },
  },
};
</script>

<style lang="scss" >
@import "../../../styles/generator.scss";
.Fg-table-container {
  width: 100%;
  overflow-x: auto;
  // margin-bottom: 22px;
  > table {
    height: 100%;
    width: 100%;
    // border: 1px solid #ebeef5;
    border-style: solid;
    border-color: #ebeef5;
    border-collapse: collapse; /* 折叠边框，使其看起来更整洁 */
    position: relative;

    td {
      position: relative;
      // overflow-x: auto;
      border: 1px solid #ebeef5;
      border-style: solid !important;
    }

    .Fg-table-options {
      position: absolute;
      right: 1px;
      bottom: 1px;
      z-index: 1;

      > div {
        & + div {
          margin-left: 10px;
        }
      }
    }
    .Fg-table-move {
      position: absolute;
      right: -10px;
      // bottom: 34px;
      top: 50%;
      transform: translateY(-10px);
    }

    .form-row-container {
      .Fg-form-draggable {
        > .Fg-form-item:last-child {
          > .el-form-item {
            margin-bottom: 0;
          }
        }
      }
    }
  }
}

.Fg-resize-guide {
  position: fixed;
  border-left: 1px dashed #000;
  height: 100%;
  top: 0;
  z-index: 1000;
}
.Fg-resize-box {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  z-index: 1;
}

.Fg-active.Fg-td-active {
  height: calc(100% - var(--cellpadding) - 2px);
}
</style>

